<template>
  <div class="subComponent">
    <div>位置：{{ repositorie.position }}</div>
    <div>类型：{{ repositorie.type }}</div>
    <div>{{ title }}</div>
    <div>{{ book.title }}</div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs, toRef, onMounted, watch } from "vue";
import useUserRepositories from "../composables/useUserRepositories";

export default defineComponent({
  setup(props) {
    const title = ref("setup方法中的值类型数据：ref(值类型)");
    const book = reactive({ title: "setup方法中的引用类型数据：reactive(引用类型)" });

    // const { position } = toRefs(props);
    // props中没有potion时，也会创建一个ref
    const position = toRef(props, "position");

    const { repositorie, getUserRepositorie } = useUserRepositories(position);

    return {
      title,
      book,
      repositorie,
      getUserRepositorie,
    };
  },
  components: {},
  props: {
    position: {
      type: String,
      required: true,
      default: "",
    },
  },
  data() {
    return {};
  },
  methods: {},
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped></style>
